<ion-view view-title="{{currentTab|tabName}}">
  <ion-nav-buttons side="right">
    <button class="button button-icon icon ion-compose" ng-click="showNewTopicModal()" ng-disabled="loginName == null"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">

    <ion-refresher ng-if="topics.length > 0 || loadError" pulling-text="下拉刷新..." on-refresh="doRefresh()">
    </ion-refresher>
    <ion-list class="topics">
      <ion-item class="item-avatar"
        collection-repeat="topic in topics"
        collection-item-width="'100%'"
        collection-item-height="73"
        href="#/topic/{{topic.id}}">
        <img ng-src="{{topic.author.avatar_url | protocol}}" ng-if="!settings.saverMode" reset-img>
        <h2>{{topic.title}}</h2>
        <p class="summary">
          <span ng-if="!topic.top && !topic.good" class="tab">{{topic.tab|tabName}}</span>
          <span ng-if="topic.top" class="tab hl">置顶</span>
          <span ng-if="topic.good && !topic.top" class="tab hl">精华</span>
          {{topic.author.loginname}}
          <span class="item-note ago" am-time-ago="topic.last_reply_at">
          </span>
        </p>
      </ion-item>
    </ion-list>
    <!--
      Loading icon of infinte-scroll not showing with collection-repeat
      https://github.com/driftyco/ionic/issues/2376
    -->
    <ion-infinite-scroll on-infinite="loadMore()" distance="10%" ng-if="hasNextPage && !loadError">
    </ion-infinite-scroll>
  </ion-content>
</ion-view>
